<template>        
  <div class="article-bottom">
    <van-button
      @click="postCommentClick"
      class="comment-btn"
      type="default"
      round
      size="small"
    >写评论</van-button>
    <van-icon 
      v-if="isShowBtn"
      class="comment-icon"
      name="comment-o" 
      :badge="commentCount" 
      color="#777"
    ></van-icon>
    <van-icon 
      v-if="isShowBtn"
      name="star-o" 
      color="#777"
      :color="article.is_collected ? 'orange' : ''"
      :name="article.is_collected ? 'star' : 'star-o'"
      :loading="isCollectLoading"
      @click="onCollect"
    ></van-icon>
    <van-icon 
      v-if="isShowBtn"
      :name="article.attitude === 1 ? 'good-job': 'good-job-o'" 
      :color="article.attitude === 1 ? 'red' : '#777'"
      :loading="isLikeLoading"
      @click="onLike"
    ></van-icon>
    <van-icon 
      v-if="isShowBtn"
      class="share-icon" 
      name="share" 
      color="#777"
    ></van-icon>
  </div>
</template>

<script>
import {addCollect, cancelCollect, addLike, cancelLike} from '@/api/article'

export default {
  name: "ArticleBottomBar",
  components: {},
  props: {
    isShowBtn: {
      type: Boolean,
      default: true
    },
    article: {
      type: Object,
      // required: true,
      default() {
        return {}
      }
    },
    commentCount: {
      type: Number,
      // required: true 
    }
  },
  data() {
    return {
      // 收藏按钮的loading状态
      isCollectLoading: false,
      // 点赞按钮的loading状态
      isLikeLoading: false 
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 收藏
    async onCollect() {
      this.$toast.loading({
        message: "操作中...",
        forbidClick: true //禁止背景点击
      })
      this.isCollectLoading = true;
      if (this.article.is_collected) {
        // 已收藏 取消收藏
        await cancelCollect(this.article.art_id)
      } else {
        // 添加收藏
        await addCollect(this.article.art_id)
      }
      this.$emit('updateCollected',)
      this.article.is_collected = !this.article.is_collected;
      this.isCollectLoading = false;
      this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
    },
    // 点赞
    async onLike() {
      this.$toast.loading({
        message: "操作中...",
        forbidClick: true //禁止背景点击
      })
      this.isLikeLoading = true;
      if (this.article.attitude === 1) {
        // 已点赞 取消点赞
        await cancelLike(this.article.art_id)
        this.article.attitude = -1;
      } else {
        // 添加收藏
        await addLike(this.article.art_id)
        this.article.attitude = 1;
      }
      this.isLikeLoading = false;
      this.$toast.success(`${this.article.attitude === 1 ? '' : '取消'}点赞成功`)
    },
    // 点击写评论
    postCommentClick() {
      this.$emit('postCommentClick');
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
// 底部区域
.article-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;

  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 44px;
  border-top: 1px solid #d8d8d8;
  .comment-btn {
    width: 160px;
  }
  .van-icon {
    font-size: 20px;
  }
  .comment-icon {
    bottom: -2px;
  }
  .share-icon {
    bottom: -2px;
  }
}
</style>